<style>
    .modal {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        background: rgba(0,0,0,.6)
    } 
    .act_modal_box {
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 1001;
        width: 100%;
        background-color: #efeff4;
    }
    .act_modal_box_in {
        animation: inAnimation .3s;
        -moz-animation: inAnimation .3s; /* Firefox */
        -webkit-animation: inAnimation .3s; /* Safari and Chrome */
    }
    .act_modal_box_out {
        animation: outAnimation .3s;
        -moz-animation: outAnimation .3s; /* Firefox */
        -webkit-animation: outAnimation .3s; /* Safari and Chrome */
    }
    .modal_box_back {
        background: #fff;
    }
    .act_res {
        padding: 10px 0;
    }
    .act_res:before {
        content:'';
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        height: 1px;
        border-top: 1px solid #d9d9d9;
        color: #d9d9d9
    }
    .act_option_first, .act_option_last {
        background-color: rgb(240,240,240);
        height: 36px;
        line-height: 36px;
        text-align: center; 
    }
    @keyframes inAnimation
    {
        from {transform: translateY(100%)}
        to {transform: translateY(0);}
    }

    @-moz-keyframes inAnimation /* Firefox */
    {
        from {transform: translateY(100%)}
        to {transform: translateY(0);}
    }
    @-webkit-keyframes inAnimation /* Safari and Chrome */
    {
        from {transform: translateY(100%)}
        to {transform: translateY(0);}
    }
    @keyframes outAnimation
    {
        from {transform: translateY(0);}
        to {transform: translateY(100%)}
    }

    @-moz-keyframes outAnimation /* Firefox */
    {
        from {transform: translateY(0);}
        to {transform: translateY(100%)}
    }
    @-webkit-keyframes outAnimation /* Safari and Chrome */
    {
        from {transform: translateY(0);}
        to {transform: translateY(100%)}
    }
</style>
<template>
    <div class="act_modal" v-show="show">
        <div class="modal" @click.self="clickMask">
            <div :class="[ defaultClass , show ? inClass : outClass]">
                <div class="modal_box_back">
                    <div class="act_res">
                        <div class="act_option_first" @click="clickFirst">
                            <slot name="firstTitle">
                                {{firstTitle}}
                            </slot>
                        </div>
                    </div>
                    <div class="act_res">
                        <div class="act_option_last" @click="clickLast">
                            <slot name="lastTitle">
                                {{lastTitle}}
                            </slot>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

    export default {
    	components: {
    		
    	},
        props: {
            //为true时弹框显示
            show: {
                type: Boolean,
                twoWay: true,
                default: false
            },
            //弹出框选项title
            firstTitle: {
                type: String,
                default: 'firstOptions'
            },
            lastTitle: {
                type: String,
                default: 'lastOptions'
            },
            //为true时无法点击遮罩关闭弹框
            force: {
                type: Boolean,
                default: false
            },
            //点击某个菜单时关闭弹出框
            closeWhenCLICK: {
                type: Boolean,
                default: false
            },
            //自定义动画效果
            transition: {
                type: String,
                default: 'Option'
            }
        },
        ready (){
            duration: null
        },
        data: function () {
        	return {
        		defaultClass: 'act_modal_box',
                inClass: 'act_modal_box_in',
                outClass: 'act_modal_box_out'
        	}
        },
        methods: {
            clickMask: function() {
                if( !this.force ){
                    this.show= false
                }
            },
            clickFirst: function() {
                this.$emit('clickFirst');
                if( this.closeWhenCLICK ) {
                    this.show= false
                }
            },
            clickLast: function() {
                this.$emit('clickLast');
                if( this.closeWhenCLICK ) {
                    this.show= false
                }
            }
        }
    }
</script>